<template>
  <el-card style="width: 100%">
    <template #header>
      <el-row justify="space-between">
        <el-col :span="12" style="text-align: left">
          <div>
            <el-tooltip content="左键单击标记为座位">
              <el-icon color="#aaaaaa" :size="30">
                <MilkTea/>
              </el-icon>
            </el-tooltip>
            不可坐
            <el-tooltip content="鼠标右键标记不可坐">
              <el-icon color="#41e80b" :size="30">
                <MilkTea/>
              </el-icon>
            </el-tooltip>
            标为座位
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="selectAll">全部标为座位</el-button>
          <el-button type="danger" @click="resetTable">重置</el-button>
        </el-col>
      </el-row>

    </template>
    <table style="text-align: center;font-size: 25px;margin: 0 auto">
      <tr v-for="row in seatTable.rows" :key="row+1000">
        <td v-for="col in seatTable.cols" :key="col+10000">
          <el-icon @contextmenu.prevent="delSeat(row,col)" @click="addSeat(row,col)" :color="getColor(row,col)"
                   :size="25"
                   style="padding: 10px;cursor: pointer">
            <MilkTea/>
          </el-icon>
        </td>
      </tr>
    </table>
  </el-card>
</template>

<script setup lang="ts">
import {MilkTea,} from '@element-plus/icons-vue'
import utils from "../utils";


// 1是空座位 6不是座位  2已售出
const props = defineProps({
  seatTable: {
    type: Object,
    default: {}
  }
})
// watch(props.seatTable, (newData, oldData) => {
//   console.log(newData.rows, oldData.rows)
//   if (newData.rows != oldData.rows || newData.cols != oldData.cols) {
//     props.seatTable.table = ''
//     for (let i = 0; i < props.seatTable.rows * props.seatTable.cols; i++) {
//       props.seatTable.table += '1'
//     }
//   }
// })
const selectAll = () => {
  props.seatTable.table = ''
  for (let i = 0; i < props.seatTable.rows * props.seatTable.cols; i++) {
    props.seatTable.table += '1'
  }
}
const resetTable = () => {
  props.seatTable.table = ''
  for (let i = 0; i < props.seatTable.rows * props.seatTable.cols; i++) {
    props.seatTable.table += '6'
  }
}
const addSeat = (row: number, col: number) => {
  props.seatTable.table = utils.replaceStr(props.seatTable.table, (row - 1) * props.seatTable.cols + (col - 1), '1')
}
const delSeat = (row: number, col: number) => {
  props.seatTable.table = utils.replaceStr(props.seatTable.table, (row - 1) * props.seatTable.cols + (col - 1), '6')
}
const getNum = (row: number, col: number) => {
  return props.seatTable.table.charAt((row - 1) * props.seatTable.cols + (col - 1))
}
const getColor = (row: any, col: any) => {
  let num = getNum(row, col)
  if (num == 6) {
    return '#aaaaaa'
  } else if (num == 1) {
    return '#41e80b'
  }
}
</script>

<style scoped>

</style>